<template>
  <div class="app-container">
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="步骤1" description="编辑基本信息"></el-step>
      <el-step title="步骤2" description="上传详细信息"></el-step>
      <el-step title="步骤3" description="信息审核确认"></el-step>
    </el-steps>
    <el-form ref="teacher" :model="teacher" label-width="80px" :label-position="labelPosition">
      <el-form-item label="教师姓名">
        <el-input v-model="teacher.teacherName" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="工作地点">
        <el-input v-model="teacher.officeSpace" style="width: 250px"></el-input>
      </el-form-item>
          <el-form-item label="民族">
        <el-input v-model="teacher.nationality" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="teacher.sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="teacher.tel" style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="teacher.email" style="width: 250px"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveTeacher()">立即创建</el-button>
        <el-button @click="clear()">清空信息</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";
export default {
  data() {
    return {
      labelPosition: "left",
      teacher: {
        sex: "男",
      },
    };
  },
  methods: {
    saveTeacher() {
      teacherApi.savaTeacher(this.teacher).then((res) => {
        //提示
        this.$message({
          type: "success",
          message: "编辑基础信息成功!",
        });
        //跳转到第二步
        this.$router.push({
          path: "/teacher/detail/" + res.data.teacherId,
        });
      });
    },
    clear(){
        // this.teacher = {}
        // this.teacher.sex = "男"
        console.log(this.teacher)
    }
  },
  created() {},
};
</script>

<style>
</style>